import React, { Component } from "react";
import { connect } from "react-redux";
import { Button, Card, List } from "antd";
import { ArrowLeftOutlined } from "@ant-design/icons";
import "./detail.less"
import { reqProductInfoById,reqCategoryById } from "../../api";
import { BASE_IMG_URL } from "../../config";
const { Item } = List;

//todo：有一个问题，如何在点击左上角返回按钮的时候，返回到这条商品所在的那一页，而不是返回商品列表的第一页
@connect(
    state => ({
        productInfo: state.productInfo
    }),
    {}
)
class ProductDetail extends Component {

    state = {
        detail: "",//商品详情
        desc: "",//商品描述
        imgs: [],//商品图片
        name: "",//商品名称
        price: "",//商品价格
        categoryId: "",//商品分类id
        categoryName:"",//商品分类
        _id: ""//商品id
    }

    componentDidMount() {
        //如果redux中有商品详情，就直接显示，这里在显示之前调用一下获取分类（商品对象中之有分类id），如果刷新时redux被清空，则向服务器获取商品详情
        if (Object.keys(this.props.productInfo).length === 0) {
            this.getProductInfo(this.props.match.params.id);
        } else {
            this.getCategory(this.props.productInfo);
        }
    }

    /**
     * 获取分类
     * @param {商品详情对象} product 
     */
    getCategory = async (product)=>{
        let category = await reqCategoryById(product.categoryId);
        this.unzip(product,category.name);
    }

    /**
     * 解压商品对象，放到state中
     * @param {商品对象} productInfo 
     * @param {分类名称} categoryName 
     */
    unzip = (productInfo,categoryName) => {
        let { _id, name, desc, imgs, price, categoryId, detail } = productInfo;
        this.setState({ _id, name, desc, price, categoryId, detail, imgs: [...imgs] ,categoryName});
    }

    /**
     * 根据商品id获取商品详情，详情中的分类只有分类id，所以需要再获取一下分类
     * @param {商品id} productId 
     */
    getProductInfo = async (productId) => {
        let product = await reqProductInfoById(productId);
        this.getCategory(product);
    }

    render() {
        return (
            <Card
                title={
                    <div>
                        <Button icon={<ArrowLeftOutlined />} type="link" onClick={() => { this.props.history.goBack() }} />
                        <span>商品详情</span>
                    </div>
                }
            >
                <List bordered>
                    <Item>
                        <div>
                            <span className="span-title">商品名称：</span>
                            <span className="span-content">{this.state.name}</span>
                        </div>
                    </Item>
                    <Item>
                        <div>
                            <span className="span-title">商品描述：</span>
                            <span className="span-content">{this.state.desc}</span>
                        </div>
                    </Item>
                    <Item>
                        <div>
                            <span className="span-title">商品价格：</span>
                            <span className="span-content">{"￥"+this.state.price}</span>
                        </div>
                    </Item>
                    <Item>
                        <div>
                            <span className="span-title">所属分类：</span>
                            <span className="span-content">{this.state.categoryName}</span>
                        </div>
                    </Item>
                    <Item>
                        <div>
                            <span className="span-title">商品图片：</span>
                            {
                                this.state.imgs.map(v => {
                                    return <img className="product-img" key={v} src={BASE_IMG_URL + v} alt={v} />
                                })
                            }
                        </div>
                    </Item>
                    <Item>
                        <div>
                            <span className="span-title">商品详情：</span>
                            <div dangerouslySetInnerHTML={{ __html: this.state.detail }} />
                        </div>
                    </Item>
                </List>
            </Card>
        )
    }
}
export default ProductDetail;